<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CIMS - Login Page</title>

    <!-- Foundation framework -->
    <link rel="stylesheet" href="${resource(dir: 'foundation', file: 'stylesheets/foundation.css')}" />
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'style.css')}" />
    <!-- Favicons and the like (avoid using transparent .png) -->
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon-precomposed" href="icon.png" />
  </head>
  <body class="ptrn_a grdnt_a">
    <div class="container">
      <div class="row">
        <div class="eight columns centered">

        </div>
      </div>
      <div class="row">
        <div class="eight columns centered">
          <div class="login_box">
            <div class="lb_content">
              <!--
              <div class="login_logo"><img src="${resource(dir: 'img', file: 'logo.png')}"></div>
              -->
              <div class="cf">
                <h2 class="lb_ribbon lb_blue"><span>
北京开放大学课程信息管理系统</span></h2>
                <a href="${createLink(uri: '/auth/reg')}"  class="right small">
                  <span>新用户注册</span>
                 </a>
              </div>
              <div class="row m_cont">
                <div class="eight columns centered">
                  <div class="l_pane">
                    <g:form action="signIn" method="post" class="nice" id="rp_form">
                      <input type="hidden" name="targetUri" value="${targetUri}" />
                      <g:if test="${flash.message}">
                        <div class="message alert-box error">${flash.message} <a href="" class="close">&times;</a></div>
                      </g:if>
                      <div class="sepH_c">
                        <div class="elVal">
                          <label for="upname">用户名</label>
                          <input type="text" name="username" value="${username}" class="oversize expand input-text" />

                        </div>
                        <div class="elVal">
                          <label for="password">密码</label>
                          <input type="password" name="password" value="" class="oversize expand input-text" />

                        </div>
                      </div>
                      <div class="cf">
                        <label for="remember" class="left"><g:checkBox name="rememberMe" value="${rememberMe}" /> 记住我 </label>
                        <input type="submit" class="button small radius right black" value="登录" />

                      </div>
IE6存在不兼容情况，建议升级到IE8
                    </g:form>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="${resource(dir: 'js', file: 'jquery.min.js')}"></script>
    <script src="${resource(dir: 'js', file: 's_scripts.js')}"></script>
    <script src="${resource(dir: 'lib', file: 'validate/jquery.validate.min.js')}"></script>

    <script>
            $(document).ready(function() {
                    $(".sl_link").click(function(event){
                            $('.l_pane').slideToggle('normal').toggleClass('dn');
                            $('.sl_link,.lb_ribbon').children('span').toggle();
                            event.preventDefault();
                    });

                    $("#l_form").validate({
                            highlight: function(element) {
                                    $(element).closest('.elVal').addClass("form-field error");
                            },
                            unhighlight: function(element) {
                                    $(element).closest('.elVal').removeClass("form-field error");
                            },
                            rules: {
                                    username: "required",
                                    password: "required"
                            },
                            messages: {
                                    username: "Please enter your username (type anything)",
                                    password: "Please enter a password (type anything)"
                            },
                            errorPlacement: function(error, element) {
                                    error.appendTo( element.closest(".elVal") );
                            }
                    });

                    $("#rp_form").validate({
                            highlight: function(element) {
                                    $(element).closest('.elVal').addClass("form-field error");
                            },
                            unhighlight: function(element) {
                                    $(element).closest('.elVal').removeClass("form-field error");
                            },
                            rules: {
                                    upname: {
                                            required: true,
                                            email: true
                                    }
                            },
                            messages: {
                                    upname: "Please enter a valid email address"
                            },
                            errorPlacement: function(error, element) {
                                    error.appendTo( element.closest(".elVal") );
                            }
                    });
            });
    </script>
  </body>
</html>

